<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"/>
    <title th:text="${vote.voteName}">XXXX教师评选</title>
    <link href="/static/css/bootstrap.css" rel="stylesheet">
    <link href="/static/css/site.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <link href="/static/css/prettyPhoto.css" rel="stylesheet">
    <link href="/static/css/styles.css" rel="stylesheet">
    <!-- Javascript -->
    <script src="/static/js/jquery.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/bootstrap-hover-dropdown.min.js"></script>
    <script src="/static/js/back-to-top.js"></script>
    <script src="/static/js/placeholder.js"></script>
    <script src="/static/js/prettyPhoto.js"></script>
    <script src="/static/js/jflickrfeed.min.js"></script>
    <script src="/static/js/main.js"></script>
    <!--    懒加载-->
    <script src="/static/js/jquery.lazyload.js"></script>
    <style type="text/css">
        footer {
            background-color: #2F4056;
            text-align: center;
            padding: 20px;
        }

        footer * {
            color: #fff;
        }

        .rank-title {
            font-size: 22px;
            margin-left: 15px;
            margin-bottom: 30px;
            display: block;
        }

        section {
            margin-left: 20px;
            height: 200px;
            width: 350px;
        }

        .candidate-selected {
            display: block;
            border: 1px solid #6565ef !important;
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
            transition: box-shadow .25s;
            border-radius: 2px;
        }

        .select {
            display: inline-block;
            margin-bottom: 9px;
        }

        .select button {
            height: 23px;
            line-height: 10px;
        }

        .layui-layer-red .layui-layer-title {
            background-color: #FF5722;
            color: #fff;
        }

        .submit-btn {
            text-align: center;
        }

        .submit-btn button {
            height: 38px;
            width: 79px;
            margin: 10px;
        }

        /*.modal .input-group {*/
        /*    margin: 10px 30px;*/
        /*}*/

        /*.modal-dialog {*/
        /*    width: 400px;*/
        /*}*/
    </style>
</head>

<body class="home-page" style="overflow-x:hidden; ">
<div class="wrapper">

    <!-- ******HEADER****** -->
    <header class="header" style="background:#1053a4;  ">

        <div class="header-main container" style="padding: 0;margin: 0;width: 100%;">

            <div class="row" style="">

                <h1 class="logo col-md-4 col-sm-12" style="padding-left: 66px;">
                    <a href="#">
                        <img id="logo" style="margin-top: 30px" class="img-responsive" src="/static/img/logo.png"
                             alt="Logo">
                    </a>
                </h1><!--//logo-->
                <div class="info col-md-8 col-sm-12" style="">
                    <img src="/static/img/bg2.png" style="width: 100%; height: 121px;" alt="">
                </div><!--//info-->
            </div>

        </div><!--//header-main-->

    </header><!--//header-->

    <!-- ******NAV****** -->
    <nav class="main-nav" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button><!--//nav-toggle-->
            </div><!--//navbar-header-->

            <div class="navbar-collapse collapse" id="navbar-collapse">

                <ul class="nav navbar-nav">

                    <li class="active nav-item">
                        <a th:href="@{'/user/vote/'+${vote.id}}">首页</a>
                    </li>

                    <li class="nav-item">
                        <a th:href="@{'/vote/file/'+${vote.id}}">评选条件</a>
                    </li>
                </ul><!--//nav-->
            </div><!--//navabr-collapse-->
        </div><!--//container-->
    </nav><!--//main-nav-->


    <div class="wrap" style="background:url( /static/img/bg01.jpg ) no-repeat top left;
				background-position:left top;
				background-size: 100% auto;
				margin-top:-15px;
				">

        <div class="content container"
             style="margin-top:16px;
			 ">
            <div class="page-wrapper">

                <div class="page-content">

                    <div class="row page-row">
                        <div class="row">
                            <div class="col-md-4 col-sm-4 col-xs-12">

                                <section class="widget has-divider"
                                         style="margin-top:-26px; min-height: 100px; height: unset !important;">

                                    <h1 class="section-heading text-highlight" style=""><span class="line">投票时间</span>
                                    </h1>
                                    <p style="font-size:15px; line-height:26px; color:#010101; ">
                                        开始日期：<span th:text="${#dates.format(vote.startTime, 'yyyy-MM-dd HH:mm')}">教师、本科生和研究生每人可以实名投票1次，且需在所有候选人中选满10人方可提交。投票结束后，所有候选人按照公开推荐结果排序依次赋分（得票最高者赋100分，最低者赋80分，同票数排序并列赋相同分），赋分结果按照40%的权重带入专家推荐环节。</span>
                                    </p>
                                    <p style="font-size:15px; line-height:26px; color:#010101; ">
                                        截止日期：<span th:text="${#dates.format(vote.endTime, 'yyyy-MM-dd HH:mm')}">教师、本科生和研究生每人可以实名投票1次，且需在所有候选人中选满10人方可提交。投票结束后，所有候选人按照公开推荐结果排序依次赋分（得票最高者赋100分，最低者赋80分，同票数排序并列赋相同分），赋分结果按照40%的权重带入专家推荐环节。</span>
                                    </p>

                                </section><!--//widget-->
                            </div>

                            <div class="col-md-4 col-sm-4 col-xs-12">
                                <section class="widget has-divider"
                                         style="margin-top:-26px; height: unset !important; min-height: 100px;">

                                    <h1 class="section-heading text-highlight" style=""><span class="line">投票规则</span>
                                    </h1>
                                    <p style="font-size:15px; line-height:26px; color:#010101; ">XXXX教师、学生每人可实名投票1次，且需在</p>
                                    <p style="font-size:15px; line-height:26px; color:#010101; ">
                                        所有候选人中选满7人(含辅导员2人)方可提交。</p>
                                    <p><br/></p>

                                </section><!--//widget-->
                            </div>

                            <div class="col-md-4 col-sm-4 col-xs-12">
                                <section class="events"
                                         style="background:none; padding:0; margin-top:-26px; height: unset !important; display:block; min-height: 100px;">

                                    <h1 class="section-heading text-highlight" style="position:relative;">
                                        <span class="line">评选动态</span>
                                        <a class="read-more" href="http://www.wxc.edu.cn"
                                           style="position: absolute;top: -5px;left: 90px;">
                                            查看更多<i class="fa fa-chevron-right"></i>
                                        </a>
                                    </h1>

                                    <div class="section-content" style="min-height:100px; ">


                                        <div class="event-item" style="padding-left:6px; border: none;">

                                            <div class="details">

                                                <h3 class="title"
                                                    style=" line-height:23px; overflow: hidden; padding-bottom:0; margin-top:9px; margin-bottom:1px; ">

                                                    <a href="http://www.XXXX.edu.cn/2019/0529/c6a113812/page.htm"
                                                       style="font-size:15px;"
                                                    >

                                                        关于开展“XXXX育人贡献奖”评选表彰活动的通知
                                                    </a>

                                                </h3>

                                            </div><!--//details-->

                                        </div><!--event-item-->

                                    </div><!--//section-content-->

                                </section><!--//events-->
                            </div>
                        </div>
                        <div class="news-wrapper col-md-12 col-sm-12 col-xs-12">
                            <style>

                                .news-item {
                                    background-color: #f6f6f6;
                                    padding-top: 16px;
                                    margin: -16px 0 -16px -16px;
                                    min-height: 162px;
                                }

                            </style>

                            <div class="row page-row">
                                <input type="hidden" id="vid" th:value="${vote.id}">
                                <div th:class="${r}" th:each="r : ${ranks}">
                                    <div class="col-md-12 col-sm-12 col-xs-12" th:if="${r} ne '教师'"
                                         style="padding-left: 0">
                                    <span class="rank-title has-divider" style="margin-left: 0 !important;
                                    display: block;
                                    color: white;
                                    background: linear-gradient(to right, #2a5d8f , #fffff3);
                                    padding: 4px 20px;
                                    border: 0;
                                    "><span style="display: inline-block;"
                                            th:text="${r}">教师</span> &nbsp;<i
                                            class="fa fa-angle-right" style="display: inline-block;"></i></span>
                                    </div>
                                    <div class="col-md-3 col-sm-3 col-xs-12" th:each="c : ${candidates}"
                                         th:if="${c.rank eq r}">
                                        <article class="news-item page-row has-divider clearfix row"
                                                 style="border: 1px dotted #e8e8e8;">

                                            <figure class="thumb col-md-5 col-sm-5 col-xs-5">

                                                <img class="img-responsive" th:data-original="'/pic/' + ${c.photoUrl}"
                                                     alt="" style="max-height:140px;
																" onerror="this.style.visibility=&#039;hidden&#039;">
                                            </figure>

                                            <div class="details col-md-7 col-sm-7 col-xs-7">

                                                <h3 class="title" style="margin-bottom: 10px;">

                                                    <strong th:text="${c.user.username}">王飞绒</strong>

                                                </h3>
                                                <p style="overflow:hidden;
											  white-space: nowrap;	/*规定文本不进行换行*/
											  text-overflow: ellipsis;	/*当对象内文本溢出时显示省略标记（...）*/
											  font-size: 16px;
											  text-shadow: 3px 2px 38px #9c8d8d;
											  color: #564b4b;
											 " th:text="${c.user.academy}">
                                                    (原)经贸管理学院
                                                </p>
                                                <div class="select" style="display:block;">
                                                    <button class="btn btn-danger vote-btn">
                                                        投TA一票
                                                    </button>
                                                    <input type="checkbox" hidden="hidden">
                                                </div>
                                                <input type="hidden" name="cid" th:value="${c.id}">
                                                <a class="btn btn-primary btn-xs read-more"
                                                   href="javascript:;" style="display: block; margin-right: 44px">
                                                    &nbsp;详细介绍&nbsp;<i class="fa fa-chevron-right"></i>
                                                </a>
                                            </div>

                                        </article><!--//news-item-->
                                    </div>
                                </div>
                            </div>

                        </div>


                    </div>

                    <hr/>
                    <div class="submit-btn">
                        <button class="btn btn-success submit" id="submit">提交</button>
                        <button class="btn btn-primary reset" id="reset">重置</button>
                    </div>
                </div>

            </div>

        </div>

        <!--</div>-->

    </div>

</div><!--//wrapper-->


<!-- ******FOOTER****** -->
<footer>
    <p>
        <span>地址：安徽省六安市裕安区月亮岛</span>
        <!--<span>当前IP地址：211.70.164.115</span>-->
        <!--<span>访问量：2420493</span>-->
    </p>
    <p>
        <span>皖西学院 Copyright 2019-2025 @ All Rights Reserved</span>
    </p>
    <p>
        <span>建议使用IE9.0或以上版本</span>
    </p>
</footer>
<!--登录的模态框-->
<div class="modal fade" tabindex="-1" id="modal" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">投票登录</h4>
            </div>
            <div class="modal-body">
                <div class="input-group">
                    <span class="input-group-addon">账号</span>
                    <input type="text" id="jobNumber" class="form-control">
                </div>
                <span style="margin: 10px 33px; color: red;">*账号为你的学号或工号</span>
                <div class="input-group">
                    <span class="input-group-addon">密码</span>
                    <input type="password" id="password" class="form-control">
                </div>
                <span style="margin: 10px 33px; color: red;">*密码为你的身份证号后六位</span>
                <div class="input-group" style="width: 70%;">
                    <span class="input-group-addon">验证码</span>
                    <input type="text" id="code" class="form-control">
                </div>
                <img id="verify" style="position: absolute;right: 20px;top: 110px;width: 78px;height: 46px;"
                     class="img-responsive" src="" alt="">
            </div>
            <div class="modal-footer">
                <a href="/changePass" style="margin-right: 20px; text-decoration: underline">修改密码</a>
                <button type="button" id="login" class="btn btn-primary">登录</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="/static/layui/layui.js"></script>
<script src="/static/js/yii.js"></script>
<script>
    layui.config({
        base: '/static/ib/model'
    }).use(['jquery', 'element', 'layer'], function () {
        var $ = layui.$,
            layer = layui.layer;

        //在页面加载的时候先渲染
        function render() {
            let list = $('.select');
            for (let i = 0; i < list.length; i++) {
                const obj = $(list[i]).parents()[1];
                const input = $(list[i]).children()[1];
                if ($(input).is(':checked')) {
                    $(obj).addClass('candidate-selected');
                } else {
                    $(obj).removeClass('candidate-selected');
                }
            }
        }

        $(function () {
            render();
            $('img').lazyload();
        });

        $('.read-more').click(function () {
            const cid = $(this).prev().val();
            const vid = $('#vid').val();
            window.location.href = '/candidate/details?cid=' + cid + '&vid=' + vid;
        });

        //监听投票选中
        $('.select').click(function () {
            let obj = $(this).parents()[1];
            let input = $(this).children()[1];
            input.checked = !input.checked;
            if ($(input).is(':checked')) {
                $(obj).addClass('candidate-selected');
            } else {
                $(obj).removeClass('candidate-selected');
            }
        });

        //绑定重置
        $('#reset').bind('click', function () {
            let inputs = $('.select');
            for (let i = 0; i < inputs.length; i++) {
                $(inputs[i]).children()[1].checked = false;
            }
            render();
        });

        /*================监听投票事件===================*/

        //获取所有input框的情况
        const inputs = $('.select');
        let c = new Array();
        //遍历放入cid
        for (let i = 0; i < inputs.length; i++) {
            if ($(inputs[i].children[1]).is(':checked') == true) {
                c.push($(inputs[i]).next().val());
            }
        }
        const vid = $('#vid').val();
        let jobNumber;
        let password;
        $('#login').bind('click', function () {
            console.log('hello world');
            jobNumber = $('#jobNumber').val();
            password = $('#password').val();
            code = $('#code').val();
            //关闭模态框
            $.ajax({
                type: 'post'
                , url: '/user/vote2candidate?vid=' + vid
                , contentType: 'application/json'
                , data: JSON.stringify({c: c, jobNumber: jobNumber, password: password, code: code})
                , success: function (d) {
                    if (d.status == 200) {
                        $('#modal').modal('hide');
                        layer.msg(d.msg)
                    } else {
                        $('#verify').attr('src', '/code?timestamp=' + new Date().getTime());
                        layer.alert(d.msg, {
                            skin: 'layui-layer-red'
                            , closeBtn: 0
                            , anim: 4 //动画类型
                        });
                    }
                }
            })
        });

        //绑定提交
        $('#submit').bind('click', function () {
            //提交前验证
            //教师限投5票
            //辅导员限投2票
            let teachers = $('.教师 .select');
            let assistants = $('.辅导员 .select');
            let a = 0, t = 0;
            for (let i = 0; i < teachers.length; i++) {
                if ($(teachers[i].children[1]).is(':checked') == true)
                    t++;
            }

            for (let i = 0; i < assistants.length; i++) {
                if ($(assistants[i].children[1]).is(':checked') == true)
                    a++;
            }

            if (a < 2) {
                layer.alert('要投满2位辅导员', {
                    skin: 'layui-layer-red'
                    , closeBtn: 0
                    , anim: 4 //动画类型
                });
                return;
            }
            if (a > 2) {
                layer.alert('只能投2位辅导员', {
                    skin: 'layui-layer-red'
                    , closeBtn: 0
                    , anim: 4 //动画类型
                });
                return;
            }

            if (t < 5) {
                layer.alert('要投满5位教师', {
                    skin: 'layui-layer-red'
                    , closeBtn: 0
                    , anim: 4 //动画类型
                });
                return;
            }

            if (t > 5) {
                layer.alert('只能投5位教师', {
                    skin: 'layui-layer-red'
                    , closeBtn: 0
                    , anim: 4 //动画类型
                });
                return;
            }

            //投票前登录
            $('#modal').modal();
            //显示验证码
            $('#modal').on('shown.bs.modal', function () {
                // 执行一些动作...
                $('#verify').attr('src', '/code?timestamp=' + new Date().getTime());
            });
            $('#verify').bind('click', function () {
                this.src = '/code?timestamp=' + new Date().getTime();
            });


        });

        // //刷新按钮
        // $('#refresh').click(function () {
        //     window.location.reload();
        // });
    })
</script>
</body>
</html>
